<template>
    <div class="weChatPay">
        <form id="myForm" method="get" @submit.prevent>
            <header>
                <strong>待输入充值金票：</strong>
                <input type="text" name="myAccount" class="myAccount" placeholder="请输入充值金票" v-model="money" />
            </header>
            <section>
                <strong>面额</strong>
                <nav class="selPrice clearfix">
                    <a href="javascript:;" :class="index == 1 ? 'checked' : ''" @click="choose(1)">
                        <span><em>1</em>金票</span>
                        <span>售价<em>1元</em></span>
                    </a>
                    <a href="javascript:;" :class="index == 2 ? 'checked' : ''" @click="choose(2)">
                        <span><em>2</em>金票</span>
                        <span>售价<em>2元</em></span>
                    </a>
                    <a href="javascript:;" :class="index == 4 ? 'checked' : ''" @click="choose(4)">
                        <span><em>4</em>金票</span>
                        <span>售价<em>4元</em></span>
                    </a>
                    <a href="javascript:;" :class="index == 6 ? 'checked' : ''" @click="choose(6)">
                        <span><em>6</em>金票</span>
                        <span>售价<em>6元</em></span>
                    </a>
                    <a href="javascript:;" :class="index == 8 ? 'checked' : ''" @click="choose(8)">
                        <span><em>8</em>金票</span>
                        <span>售价<em>8元</em></span>
                    </a>
                    <a href="javascript:;" :class="index == 10 ? 'checked' : ''" @click="choose(10)">
                        <span><em>10</em>金票</span>
                        <span>售价<em>10元</em></span>
                    </a>
                </nav>
            </section>
            <footer>
                <button class="immedRecharge" @click="immediatePay()">立即充值：<span>1.00</span>元</button>
            </footer>
        </form>
    </div>
</template>

<script>
    export default {
        name: 'weChatPay',
        watch: {

        },
        created() {

        },
        mounted() {

        },
        data() {
            return {
                // 默认是1金票，1金票 = 0.1元
                index: 1,
                // 金额
                money: ''
            };
        },
        methods: {
            // 选择用户点击的金票
            choose(index) {
                this.index = index;    
            },
            immediatePay() {
                let _this = this;
                
                // 1金票 = 1角钱
                // 用户填写了money，并且money首位不以数字开头的纯数字
                if (this.money && !/^\d*$/g.test(this.money)) {
                    alert('您输入的是非法金额！');
                    return false;
                }
            }
        },
        computed: {

        },
        components: {

        }
    };

</script>

<style lang="scss" scoped>
    form {
        padding: 0 24px;
        box-sizing: border-box;
        -webkit-box-sizing: border-box;

        header {
            strong {
                font-weight: normal;
                font-size: 24px;
                line-height: 60px;
                color: #666;
            }

            input {
                display: inline-block;
                width: 100%;
                height: 90px;
                font-weight: normal;
                font-size: 40px;
                color: #000;
                border: 0 none;
                border-bottom: 1px solid #dfdfdf;
                box-sizing: border-box;
                -webkit-box-sizing: border-box;
                border-radius: 0;
            }
        }

        section {
            margin-top: 35px;

            strong {
                font-weight: normal;
                font-size: 24px;
                line-height: 70px;
                color: #666;
            }

            nav {
                a {
                    float: left;
                    width: 220px;
                    height: 114px;
                    border: 1px solid #81c2ff;
                    border-radius: 8px;
                    margin-right: 21px;
                    margin-bottom: 26px;
                    text-align: center;
                    font-weight: normal;
                    font-size: 30px;
                    line-height: 42px;
                    color: #000;
                    padding-top: 14px;

                    span {
                        display: block;

                        &:last-of-type {
                            font-size: 24px;
                            color: #999;
                        }
                    }

                    &:nth-of-type(3n) {
                        margin-right: 0;
                    }

                    &.active {
                        background-color: #408ce2;
                    }

                    &.checked {
                        background-color: pink;
                        color: #fff;
                    }
                }

                .active {
                    span:first-of-type {
                        color: rgba(255, 255, 255, 1);
                    }

                    span:last-of-type {
                        color: rgba(255, 255, 255, .8);
                    }
                }
            }
        }

        footer {
            button {
                display: block;
                width: 688px;
                height: 90px;
                margin: 0 auto;
                font-weight: normal;
                font-size: 36px;
                line-height: 90px;
                color: #fff;
                text-align: center;
                background-color: #408ce2;
                border-radius: 6px;
                outline: none;
                cursor: pointer;
            }
        }
    }

    /** 使用webkit内核的浏览器 */
    ::-webkit-input-placeholder {
        color: #ccc;
    }

    /** Firefox版本4-18 */
    :-moz-placeholder {
        color: #ccc;
    }

    /** Firefox版本19+ */
    ::-moz-placeholder {
        color: #ccc;
    }

    /** IE浏览器 */
    :-ms-input-placeholder {
        color: #ccc;
    }

</style>
